<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <script src="./data.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul,
    li {
      list-style: none;
    }

    .footer,
    .header {
      width: 1200px;
      height: 80px;
      margin: 0 auto;
      background-color: skyblue;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40px;
      color: #fff;
    }

    .footer {
      height: 300px;
      font-size: 100px;
    }

    .content {
      width: 1200px;
      padding: 10px 0;
      margin: 0 auto;
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }

    li {
      width: 280px;
      border: 1px solid #333;
      padding-bottom: 10px;
      margin-bottom: 10px;
    }

    li>img {
      width: 280px;
      height: 320px;
      display: block;
    }

    li>p {
      padding-left: 10px;
      padding-top: 10px;
    }
  </style>
</head>

<body>
  <div class="header">网页头部</div>
  <div class="content">
    <ul>
      <li>
        <img
          src="https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01zJEpaN2GdSG1Xvo8y_!!2251059038.jpg"
          alt="" />
        <p>2020西太湖国际音乐节</p>
        <p>城市: 常州</p>
        <p>地址: 常州西太湖中国花卉博览景区北门</p>
        <p>价格: 199-399</p>
        <p>演出时间: 2020.09.19-09.20</p>
      </li>
    </ul>
  </div>
  <div class="footer">网页底部</div>

  <script>
    //获取元素ul>li里面的元素
    var data = document.querySelector("div>ul");
    //准备一个拼接字符串，接收结果
    var str = "";
    //对list数组遍历，拿到里面的每一个对象的数据
    list.forEach(function (item) {
      //根据上面的模板进行拼接
      str += `
            <li>
              <img src="${item.pic}">
              <p>${item.name}</p>
              <p>${item.city}</p>
              <p>${item.address}</p>
              <p>${item.price}</p>
              <p>${item.showTime}</p>
            </li>
      `
     })
     //渲染到表格内
     data.innerHTML = str;

  </script>
</body>

</html>